<template>
  <div class="shop-user-body">
    <!-- header -->

    <div class="user-body-lower">
      <div class="user-body-lower-header"></div>
    </div>

    <div class="user-body-upper">
      <!-- 头像 -->
      <div class="user-info">
        <img src="http://running.zhongaiyisheng.net/img/user.jpg" />
        <div>
          {{ user.name }}{{ user.mobile }}
        </div>
      </div>

      <!-- 余额 -->
      <div class="user-balance">
        <ul>
          <li @click="gotoDetail(0)">
            福豆余额<br>
            <p>{{ user.douBalance }}</p>
          </li>
          <li @click="gotoDetail(1)">
            个人福豆
            <p>{{ user.douPerson }}</p>
          </li>
          <li @click="gotoDetail(2)">
            团队福豆
            <p>{{ user.douTeam }}</p>
          </li>
          <li @click="gotoDetail(3)">
            专项福豆
            <p>{{ user.douSpecial }}</p>
          </li>
          <li @click="gotoDetail(4)">
            当日收益
            <p>{{ user.douField }}</p>
          </li>
        </ul>
      </div>

      <!-- 我的订单 -->
      <div class="user-order">
        <div class="user-order-title">
          <p class="my-order">我的订单</p>
          <div class="all-order" @click="gotoMyOrder(0)">
            <p>全部订单</p>
            <i class="all-order-allow-right"></i>
          </div>
        </div>
        <div class="user-order-content">
          <ul>
            <li @click="gotoMyOrder(1)">
              <img src="../assets/status_0.png" />
              <p>待发货</p>
            </li>
            <li @click="gotoMyOrder(2)">
              <img src="../assets/status_1.png" />
              <p>发货中</p>
            </li>
            <li @click="gotoMyOrder(3)">
              <img src="../assets/status_2.png" />
              <p>待收货</p>
            </li>
            <li @click="gotoMyOrder(4)">
              <img src="../assets/status_3.png" />
              <p>已完成</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 列表 -->
      <div class="user-list">
        <ul>
          <li>
            <div class="user-list-cell" @click="gotoTeam">
              <img src="../assets/team.png" />
              我的团队
            </div>
          </li>
          <li>
            <div class="user-list-cell" @click="gotoCharge">
              <img src="../assets/charge.png" />
              福豆充值
            </div>
          </li>
          <li>
            <div class="user-list-cell" @click="gotoCashInfo">
              <img src="../assets/cash_record.png" />
              兑现记录
            </div>
          </li>
          <li>
            <div class="user-list-cell" @click="gotoAddCash">
              <img src="../assets/draw.png" />
              福豆兑现
            </div>
          </li>
          <li>
            <div class="user-list-cell" @click="gotoCashConfig">
              <img src="../assets/bankcard.png" />
              我的银行卡
            </div>
          </li>
          <li>
            <div class="user-list-cell" @click="gotoAddress">
              <img src="../assets/address.png" />
              收货地址
            </div>
          </li>
          <li>
            <div class="user-list-cell" @click="logout">
              <img src="../assets/logout.png" />
              退出登录
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 底部导航 -->
    <mt-tabbar v-model="selected" :fixed="true">
      <mt-tab-item id="商城">
        <img slot="icon" src="../assets/home.png">
        福豆商城
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="../assets/my.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import {Indicator, Toast} from 'mint-ui';
import { Cell } from 'mint-ui';
import { Tabbar, TabItem } from 'mint-ui';
import request from "../utils/request";
import util from "../utils/util";

export default {
  components: {
    Cell,
    Tabbar,
    TabItem,
  },
  data() {
    return {
      selected: '我的',
      user: {
        name: 'x',
        mobile: '1',
        douBalance: 0,
        douPerson: 0,
        douTeam: 0,
        douSpecial: 0,
        douField: 0,
        buyTip: 0
      },
    }
  },
  async created() {
    Indicator.open();
    const res = await request({}, "/ajax/member/center");
    if(res && res.code == 0){
      this.user = res.data;
      if(this.user.buyTip){
        util.toast("复购提醒: 专项福豆即将返还完毕!现在可以进行复购");
      }
    }
    Indicator.close();
  },
  methods: {
    gotoMyOrder(index) {
      this.$router.push({
        path: '/my-order',
        query: {index: index}
      });
    },
    gotoAddress() {
      this.$router.push({
        path: '/address-list',
      });
    },
    gotoCashConfig() {
      this.$router.push({
        path: '/cashconfig-list',
      });
    },
    gotoDetail(index) {
      this.$router.push({
        path: '/account-detail',
        query: {index: index}
      });
    },
    gotoCharge() {
      util.toast("系统维护中,充值通道已关闭!");
      return;
      /*this.$router.push({
        path: '/charge',
      });*/
    },
    gotoTeam() {
      this.$router.push({
        path: '/team',
      });
    },
    gotoCashInfo() {
      this.$router.push({
        path: '/cashinfo-list',
      });
    },
    gotoAddCash() {
      this.$router.push({
        path: '/cashinfo-add',
      });
    },
    logout() {
      localStorage.removeItem("loginToken");
      this.$router.push({
        path: '/login',
      });
    }
  },
  watch: {
    selected() {
      if (this.selected === '商城') {
        this.selected = '我的';
        this.$router.push({
          path: '/',
        });
      }
    }
  },
}

</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}
.shop-user-body {

}
.user-body-lower {
  width: 100%;
  min-height: 100vh;
  background-color: #F3F3F3;
  position: absolute;

}
.user-body-lower-header {
  width: 100%;
  height: 160px;
  background-color: #1AB773;
  /* border-radius: 0 0 50% 50%; */
  border-radius: 0 0 90% 90%/30%;
}

.user-body-upper {
  width: 94%;
  min-height: 100vh;
  left: 3%;
  position: absolute;
  z-index: 1;
  padding-bottom: 50px;
}
/*头像*/
.user-info {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.user-info > div {
  margin-left: 15px;
  font-size: 22px;
  color: #fff;
}
.user-info > div p {
  margin-top: 5px;
  padding: 2px 10px;
  font-size: 10px;
  color: #fff;
  background-color: #CC1817;
  border-radius: 20px;
}
.user-info > img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
/*余额*/
.user-balance {
  background-color: #fff;
  padding: 15px 0;
  border-radius: 3px;
  margin-top: 15px;
}
.user-balance > ul {
  display: flex;
  margin: 0;
  padding: 0;
}
.user-balance > ul > li {
  list-style: none;
  flex: 1;
  font-size: 12px;
  border-right: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.user-balance > ul > li:nth-of-type(5n + 0) {
  border-right: 0px;
}
.user-balance > ul > li > p {
  margin-top: 5px;
  margin-bottom: 0;
  color: #2354F9;
}

/*我的订单*/
.user-order {
  background-color: #fff;
  border-radius: 3px;
  margin-top: 10px;
}
.user-order-title {
  padding: 15px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #CCCCCC;
}
.my-order {
  font-weight: bold;
}
.all-order {
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
}
.all-order-allow-right {
  border: solid 2px #c8c8cd;
  border-bottom-width: 0;
  border-left-width: 0;
  display: block;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  margin-left: 5px;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
.user-order-content {
  padding: 15px 30px;
}
.user-order-content > ul {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}
.user-order-content > ul > li {
  list-style: none;
  font-size: 12px;
}
.user-order-content > ul > li > img {
  width: 30px;

}
/*列表*/
.user-list {
  background-color: #fff;
  border-radius: 3px;
  margin-top: 10px;
}
.user-list > ul {
  margin: 0;
  padding: 0;
}
.user-list > ul > li {
  list-style: none;
  text-align: left;
  display: flex;
  justify-content: flex-end;
  padding-left: 10px;
}
.user-list-cell {
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
  position: relative;
  display: flex;
  align-items: center;
}
.user-list > ul > li:last-child > .user-list-cell {
  border: 0;
}
.user-list-cell > img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.user-list-cell:after {
  content: '';
  border: solid 2px #c8c8cd;
  border-bottom-width: 0;
  border-left-width: 0;
  width: 5px;
  height: 5px;
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
/*底部导航*/
.mint-tabbar {
  z-index: 99;
}
</style>
